<template>
	<view class="i-newcomers" :style="[bodyStyle]">
		<view class="" :style="[boxStyle]" @tap="$goTo('/pages/newcomers/index',{pageTitle: option.subarea.id} )">
			<view class="e-flex e-p-t-22 e-p-l-34 e-p-r-36 e-m-b-30">
				<view class="e-flex e-flex-1">
					<image v-if="option.one.icon" class="img-36 e-m-r-14" :src="option.one.icon"
						mode="aspectFit"></image>
					<view class="e-font-30 fw-600" :style="[{color: option.one.color}]">
						{{option.one.title}}
					</view>
				</view>
				<view class="e-flex">
					<view class="e-font-24">
						{{$t('layout.更多')}}
					</view>
					<view class="e-m-l-12">
						<app-image src="arrow_right.png" :size="['24rpx']" />
					</view>
					
				</view>
			</view>
			<view class="e-flex  e-p-l-28 e-p-r-28 e-m-b-40" :class="{'e-flex-between': goodsList.length > 2}">
				<view class="bg-white e-rela" v-for="item in goodsList" :key="item.id" :class="{'e-m-r-20': goodsList.length < 3}">
					<image v-if="option.one.badge" class="e-abso img-38" style="z-index: 9;"
						:src="$fullLink(option.one.badge)" mode="aspectFit"></image>
					<image class="img-200" :src="$fullLink(item.coverImg)" mode="aspectFit"></image>
					<view class="e-p-t-10 e-p-l-30 e-p-r-26 e-m-b-10 e-line-1 e-font-22 c-primary width-210">
						{{item.name}}
					</view>
					<view class=" e-p-b-10 e-p-l-30 e-p-r-26">
						<text class="c-red e-font-20">{{$unitEn}}</text>
						<text class="c-red e-font-36">{{item.price}}</text>
					</view>
				</view>
			</view>
			<view class="e-flex e-p-l-34 e-p-r-36 e-m-b-30" v-if="couponList.length">
				<view class="e-flex e-flex-1">
					<image v-if="option.two.icon" class="img-36 e-m-r-14" :src="option.two.icon"
						mode="aspectFit"></image>
					<view class="e-font-30 fw-600" :style="[{color: option.two.color}]">
						{{option.two.title}}
					</view>
				</view>
				<view class="e-flex">
					<view class="e-font-24 btn-box" :style="[btnStyle]">
						{{$t('user.立即使用')}}
					</view>
				</view>
			</view>
			<view class="e-p-l-40 e-p-b-30" v-if="couponList.length">
				<scroll-view scroll-x>
					<view class="e-flex">
						<view class="bg-white e-rela e-flex e-m-r-20 coupon-list-box"
							v-for="item in couponList" :key="item.id">
							<image v-if="option.two.badge" class="e-abso img-90" style="z-index: 9;"
								:src="$fullLink(option.two.badge)" mode="aspectFit"></image>
							<view class="e-flex">
								<view class="e-p-t-20 e-p-b-20 e-p-l-22 e-p-r-24">
									<view class="" v-if="item.type === 1">
										<text class="e-font-24 c-red">{{$unitEn}}</text>
										<text class="e-font-50 c-red">{{item.amount}}</text>
									</view>
									<view class="" v-else>
										<text class="e-font-50 c-red">{{item.discountScale}}</text>
										<text class="e-font-24 c-red">{{$t('public.折')}}</text>
									</view>
									<view class="c-98 e-font-20">
										{{$t('user.优惠券')}}
									</view>
								</view>
								<view class="e-flex-1">
									<view class="c-333 e-font-26 fw-600">
										{{item.name}}
									</view>
									<view class="c-98 e-font-20">
										{{item.endTime ? item.endTime.split(' ')[0] :''}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref,computed } from 'vue'
	import type { pageLink } from './type'
	import { px2rpx } from './utils'
	
	import {
		getCouponAndProductBySubareaId
	} from '@/common/request/api'
	import type { CouponsItem,GoodsItem } from '@/common/request/api'
	
	const props = withDefaults(defineProps<{
		option : {
			backgroundColor: string
			paddingTop: number
			paddingBottom: number
			paddingX: number
			radiusTop: number
			radiusBottom: number
			one: {
			    title: string
			    icon: string
			    color: string
			    badge: string
			},
			two: {
			    title: string
			    icon: string
			    color: string
			    badge:string
			    btnColor:string
			    textColor:string
			},
			subarea: {
			    name: string
			    id:string
			},
			link: pageLink
		}
	}>(), {
		option: () => ({
			backgroundColor: 'rgba(245, 246, 249, 1)',
			paddingTop: 12,
			paddingBottom: 12,
			paddingX: 10,
			radiusTop: 10,
			radiusBottom: 10,
			one: {
			    title: '',
			    icon: '',
			    color: 'rgba(51, 51, 51, 1)',
			    badge: ''
			},
			two: {
			    title: '',
			    icon: '',
			    color: 'rgba(51, 51, 51, 1)',
			    badge: '',
			    btnColor: 'rgba(251, 220, 186, 1)',
			    textColor: 'rgba(94, 64, 25, 1)'
			},
			subarea: {
			    name: '',
			    id: '',
			},
			link: {
			    linkName: '',
			    pageUrl: '',
			    linkUrl: ''
			}
		})
	})

	
	
	const couponList = ref<CouponsItem[]>([])
	const goodsList = ref<GoodsItem[]>([])
	
	const bodyStyle = computed(() => {
		return {
				padding: `${px2rpx(props.option.paddingTop)} ${px2rpx(props.option.paddingX)}  ${px2rpx(props.option.paddingBottom)} ${px2rpx(
				props.option.paddingX
			)}`
			
		}
	})
	
	const boxStyle = computed(() => {
		return {
			background: props.option.backgroundColor,
			borderRadius: `${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)}  ${px2rpx(props.option.radiusBottom)} ${px2rpx(props.option.radiusBottom)}`,
		}
	})
	const btnStyle = computed(() => {
		return {
			background: props.option.two.btnColor,
			color: props.option.two.textColor
		}
	})
	

	getCouponAndProductBySubareaId({
		subareaId: props.option.subarea.id
	}).then(res => {
		couponList.value = res.data.coupons
		goodsList.value = []
		res?.data?.product?.rows?.forEach((item, index) => {
			if (index < 3) {
				goodsList.value.push(item)
			}
		})
	})
</script>

<style scoped lang="scss">
	@import '@/components/list/css/layoutCommon.scss';

	.img-200 {
		width: 210rpx;
		height: 210rpx;
	}


	.width-210 {
		width: 210rpx;
	}

	.coupon-list-box {
		flex: 0 0 40%;
	}

	.img-90 {
		width: 90rpx !important;
		height: 28rpx !important;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		top: 0;
	}

	.c-98 {
		color: #989898;
	}
	.btn-box {
		padding: 8rpx 18rpx 6rpx 20rpx;
		border-radius: 24rpx;
	}
</style>
